<template>
  <div class="file-edit">
    <!-- title -->
    <a-row class="head">
      <a-icon type="left" style="cursor: pointer" @click="goBack" />
      <div class="left2" style="cursor: pointer" @click="goBack">返回</div>
      <a-col class="title">
        <strong>员工调薪</strong>
      </a-col>
    </a-row>
    <a-layout>
      <a-layout-sider width="276" class="border-r-line ta-center">
        <div class="file-user" style="margin-top: 40px">
          <a-row class="file-user-head" style="padding-left: 30px; padding-right: 30px">
            <a-col style="height: 170px">
              <a-row class="pd_b10">
                <strong style="font-size: 20px">{{ routerData.name }}</strong>
              </a-row>
              <a-row class="pd_b10" style="padding-top: 6px; padding-bottom: 25px; color: #adadad">
                {{ routerData.depName ? routerData.depName : "暂无" }}
                <a-divider type="vertical" />
                {{ routerData.positionName ? routerData.positionName : "暂无" }}
              </a-row>
              <a-row>
                <p style="color: #adadad; padding-bottom: 20px; position: absolute; left: 30px; top: 0px">
                  入职日期:
                  <span style="color: #222426">{{ formatDate(Number(routerData.joinDate), "d") }}</span>
                </p>
                <p style="color: #adadad; padding-bottom: 20px; position: absolute; left: 30px; top: 35px">
                  工作性质：<span style="color: #222426">{{ postType[routerData.postType - 1] }}</span>
                </p>
                <p style="color: #adadad; padding-bottom: 20px; position: absolute; left: 30px; top: 70px">
                  员工状态：<span style="color: #222426">{{ ["试用", "正式"][routerData.formalType - 1] }}</span>
                </p>
              </a-row>
            </a-col>
            <a-divider />
          </a-row>
        </div>
        <!-- content-con -->
      </a-layout-sider>
      <a-layout-content class="ph24 mb100">
        <a-form-model :model="form" style="margin-top: 25px">
          <a-form-model-item
            label=" 调薪模板"
            :rules="{
              required: true,
              message: '必选'
            }"
          >
            <div>
              <a-button class="modelBotton">
                {{ fixedSalaryTemplateName }}
              </a-button>
            </div>
          </a-form-model-item>
          <a-form-model-item
            v-if="routerData.formalType === 1"
            :colon="false"
            label=" 调薪明细：试用期工资"
            :rules="{
              required: true,
              message: '必选'
            }"
          >
            <a-table :columns="columns" row-key="itemName" :data-source="trainingList" :pagination="false">
              <template slot="amount" slot-scope="text">
                {{ text.toFixed(2) }}
              </template>
              <template slot="afterAmount" slot-scope="text, record">
                <div>
                  <a-input-number
                    v-if="record.isSum !== '1'"
                    :default-value="text"
                    :min="0"
                    :step="1"
                    :max="100000"
                    :precision="2"
                    style="margin: -5px 0; width: 120px"
                    @change="(value) => handleInputChange1(value, record.projectId)"
                  />
                  <span v-else>{{ text.toFixed(2) }}</span>
                </div>
              </template>
              <template slot="amplitude" slot-scope="text, record">
                <span :style="{ color: record.relativecolor }">{{ text }}</span>
              </template>
            </a-table>
          </a-form-model-item>
          <a-form-model-item
            label=" 正式工资"
            :rules="{
              required: true,
              message: '必选'
            }"
          >
            <a-table :columns="columns" row-key="itemName" :data-source="officialList" :pagination="false">
              <template slot="amount" slot-scope="text">
                {{ text.toFixed(2) }}
              </template>
              <template slot="afterAmount" slot-scope="text, record">
                <div>
                  <a-input-number
                    v-if="record.isSum !== '1'"
                    :default-value="text"
                    :min="0"
                    :step="1"
                    :max="100000"
                    :precision="2"
                    style="margin: -5px 0; width: 120px"
                    @change="(value) => handleInputChange2(value, record.projectId)"
                  />
                  <span v-else>{{ text.toFixed(2) }}</span>
                </div>
              </template>
              <template slot="amplitude" slot-scope="text, record">
                <span :style="{ color: record.relativecolor }">{{ text }}</span>
              </template>
            </a-table>
          </a-form-model-item>
          <a-form-model-item>
            <label><span style="color: red">* </span> <span style="color: rgba(0, 0, 0, 0.85)">调薪原因：</span></label>
            <a-select v-model="form.reason" style="width: 300px; margin-left: 28px" placeholder="请选择">
              <a-select-option :value="1"> 转正 </a-select-option>
              <a-select-option :value="2"> 晋升 </a-select-option>
              <a-select-option :value="3"> 调动 </a-select-option>
              <a-select-option :value="4"> 年中调薪 </a-select-option>
              <a-select-option :value="5"> 年度调薪 </a-select-option>
              <a-select-option :value="6"> 特别调薪 </a-select-option>
              <a-select-option :value="7"> 其他 </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item>
            <label><span style="color: red">* </span> <span style="color: rgba(0, 0, 0, 0.85)"> 调薪生效时间： </span></label>
            <a-date-picker style="width: 300px" placeholder="请选择" :disabled-date="disabledEndDate" @change="handleTimeChange" />
          </a-form-model-item>
          <a-form-model-item :label-col="{ span: 1 }" :wrapper-col="{ span: 13 }" label="备注">
            <a-textarea v-model="form.remark" style="width: 400px; margin-left: 64px" :max-length="50" />
            <a-row style="width: 465px" class="ta-right textarea-tip"> {{ form.remark ? form.remark.length : 0 }}/50字 </a-row>
          </a-form-model-item>
        </a-form-model>
        <a-divider />
        <a-row class="file-foot-save">
          <a-col class="fr">
            <a-button class="mg_r10" @click="goOut">取消</a-button>
            <a-button type="primary" @click="handleSubmit">保存</a-button>
          </a-col>
        </a-row>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { selectByCompanyId, SalaryIncrease, empAdjustable } from "@/api/wages/file";
const columns = [
  {
    title: "调薪项目",
    dataIndex: "itemName",
    align: "itemName",
    key: "itemName",
    scopedSlots: { customRender: "itemName" },
    width: 150
  },
  {
    title: "调薪前",
    dataIndex: "amount",
    align: "amount",
    key: "amount",
    scopedSlots: { customRender: "amount" },
    width: 150
  },
  {
    title: "调薪后",
    dataIndex: "afterAmount",
    align: "afterAmount",
    key: "afterAmount",
    scopedSlots: { customRender: "afterAmount" },
    width: 150
  },
  {
    title: "调薪幅度",
    dataIndex: "amplitude",
    align: "amplitude",
    key: "amplitude",
    scopedSlots: { customRender: "amplitude" },
    width: 150
  }
];
export default {
  name: "FileEdit",

  data() {
    return {
      currentPage: null,
      fixedSalaryTemplateName: "",
      mainId: null,
      takeDate: null,
      form: {},
      trainingList: [],
      officialList: [],
      empId: "",
      templateList: [],
      companyId: this.$store.state.hr.companyId,
      desc: "",
      number: "",
      columns,
      edit: false,
      routerData: {},
      oldData: {},
      putData: {
        salaryPerformance: "",
        mealSubsidy: "",
        trafficSubsidy: "",
        salaryBasic: "",
        reason: "",
        remark: ""
      }
    };
  },
  computed: {
    ...mapState(["hr"]),
    doWords() {
      return ["salaryPerformance", "mealSubsidy", "trafficSubsidy", "salaryBasic"];
    },
    status() {
      return ["待入职", "入职", "待离职", "离职"][this.routerData.status - 1];
    },
    postType() {
      return this.$store.state.enums.postTypeArr;
    },
    putAllMoney() {
      const { salaryPerformance, mealSubsidy, trafficSubsidy, salaryBasic } = this.putData;
      const arr = [salaryPerformance, mealSubsidy, trafficSubsidy, salaryBasic];
      return arr.reduce((preValue, curValue) => Number(preValue) + Number(curValue), 0);
    },
    reasons() {
      return [
        { label: "转正", value: "1" },
        { label: "晋升", value: "2" },
        { label: "调动", value: "3" },
        { label: "年中调薪", value: "4" },
        { label: "年度调薪", value: "5" },
        { label: "特别调薪", value: "6" },
        { label: "其他", value: "7" }
      ];
    }
  },

  created() {
    this.currentPage = this.$route.query.currentPage;
    this.routerData = JSON.parse(this.$route.query.routerData);
    console.log(this.routerData, "this.routerData ");
    this.getSelectByCompanyId();
    this.SalaryIncreaseList();
  },

  methods: {
    disabledEndDate(endValue) {
      const startValue = this.routerData.joinDate;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleTimeChange(e) {
      this.takeDate = e;
    },
    SalaryIncreaseList() {
      const id = this.routerData.empId;
      SalaryIncrease(id).then((res) => {
        this.mainId = res.data.id;
        this.fixedSalaryTemplateName = res.data.fixedSalaryTemplateName;
        this.officialList = res.data.officialList;
        this.trainingList = res.data.trainingList;
        for (var i = 0; i < this.trainingList.length; i++) {
          this.trainingList[i].afterAmount = this.trainingList[i].afterAmount
            ? this.trainingList[i].afterAmount
            : this.trainingList[i].amount;
          this.trainingList[i].projectId = i;
          this.trainingList[i].amplitude = 0.0 + "%";
          this.trainingList[i].relativecolor = "#0DB6AC";
        }
        for (var p = 0; p < this.officialList.length; p++) {
          this.officialList[p].afterAmount = this.officialList[p].afterAmount
            ? this.officialList[p].afterAmount
            : this.officialList[p].amount;
          this.officialList[p].projectId = p;
          this.officialList[p].amplitude = 0.0 + "%";
          this.officialList[p].relativecolor = "#0DB6AC";
        }
      });
    },
    getSelectByCompanyId() {
      selectByCompanyId({ companyId: this.companyId }).then((res) => {
        this.templateList = res.data;
      });
    },
    goOut() {
      const _this = this;
      this.$confirm({
        title: "员工调薪尚未保存，是否确认离开？",
        onOk() {
          _this.$router.go(-1);
        }
      });
    },
    // 试用表格输入框变化
    handleInputChange1(value, key) {
      const arr = JSON.parse(JSON.stringify(this.trainingList));
      for (var i = 0; i < arr.length; i++) {
        if (i === key) {
          arr[i].afterAmount = value;
          this.trainingList[i].afterAmount = value;
          if (arr[i].amount === 0) {
            arr[i].amplitude = "--";
          } else {
            arr[i].amplitude = Math.round(((arr[i].afterAmount - arr[i].amount) / arr[i].amount) * 10000) / 100 + "%";
          }
          if (arr[i].afterAmount - arr[i].amount > 0) {
            arr[i].relativecolor = "#FA5051";
          } else {
            arr[i].relativecolor = "#0DB6AC";
          }
        }
      }
      var s = 0;
      for (var t = 0; t < arr.length - 1; t++) {
        s += arr[t].afterAmount;
        arr[arr.length - 1].afterAmount = s;
        if (arr[arr.length - 1].amount === 0) {
          arr[arr.length - 1].amplitude = "--";
        } else {
          arr[arr.length - 1].amplitude =
            Math.round(((arr[arr.length - 1].afterAmount - arr[arr.length - 1].amount) / arr[arr.length - 1].amount) * 10000) / 100 + "%";
        }
        if (arr[arr.length - 1].afterAmount - arr[arr.length - 1].amount > 0) {
          arr[arr.length - 1].relativecolor = "#FA5051";
        } else {
          arr[arr.length - 1].relativecolor = "#0DB6AC";
        }
        this.trainingList = JSON.parse(JSON.stringify(arr));
      }
    },
    // 正式表格输入框变化
    handleInputChange2(value, key) {
      const arr = JSON.parse(JSON.stringify(this.officialList));
      for (var i = 0; i < arr.length; i++) {
        if (i === key) {
          arr[i].afterAmount = value;
          this.officialList[i].afterAmount = value;
          if (arr[i].amount === 0) {
            arr[i].amplitude = "--";
          } else {
            arr[i].amplitude = Math.round(((arr[i].afterAmount - arr[i].amount) / arr[i].amount) * 10000) / 100 + "%";
          }
          if (arr[i].afterAmount - arr[i].amount > 0) {
            arr[i].relativecolor = "#FA5051";
          } else {
            arr[i].relativecolor = "#0DB6AC";
          }
        }
      }
      var s = 0;
      for (var t = 0; t < arr.length - 1; t++) {
        s += arr[t].afterAmount;
        arr[arr.length - 1].afterAmount = s;
        if (arr[arr.length - 1].amount === 0) {
          arr[arr.length - 1].amplitude = "--";
        } else {
          arr[arr.length - 1].amplitude =
            Math.round(((arr[arr.length - 1].afterAmount - arr[arr.length - 1].amount) / arr[arr.length - 1].amount) * 10000) / 100 + "%";
        }
        if (arr[arr.length - 1].afterAmount - arr[arr.length - 1].amount > 0) {
          arr[arr.length - 1].relativecolor = "#FA5051";
        } else {
          arr[arr.length - 1].relativecolor = "#0DB6AC";
        }
        this.officialList = JSON.parse(JSON.stringify(arr));
      }
    },
    // 表单提交
    handleSubmit() {
      if (!this.officialList[this.officialList.length - 1].amplitude && !this.trainingList[this.trainingList.length - 1].amplitude) {
        this.$notification["error"]({
          message: "error",
          description: "保存失败,至少更改一项调薪项目"
        });
      } else {
        this.trainingList.forEach((item, index) => {
          item.amount = item.afterAmount;
        });
        this.officialList.forEach((item, index) => {
          item.amount = item.afterAmount;
        });
        empAdjustable({
          isFixed: 0,
          companyId: this.companyId,
          empId: this.routerData.empId,
          trainingFixedSalaryDetail: this.trainingList,
          officialFixedSalaryDetail: this.officialList,
          reason: this.form.reason,
          effectTime: this.takeDate,
          remark: this.form.remark,
          isOfficial: parseInt(this.routerData.employType),
          id: this.mainId,
          trainingSalarySum: this.trainingList[this.trainingList.length - 1].afterAmount,
          officialSalarySum: this.officialList[this.officialList.length - 1].afterAmount
        }).then(({ success }) => {
          for (var i = 0; i < this.trainingList.length; i++) {
            this.trainingList[i].amount = this.trainingList[i].afterAmount;
          }
          for (var p = 0; p < this.officialList.length; p++) {
            this.officialList[p].amount = this.officialList[p].afterAmount;
          }
          if (success) {
            this.goBack();
            this.$notification["success"]({ message: "调薪成功" });
          }
        });
      }
    },
    // 时间
    onChange() {},
    // 返回
    goBack() {
      this.$router.push({
        path: "/wages/file",
        query: {
          currentPage: this.currentPage
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
$body-width: calc(100% - 338px);
.border-r-line {
  border: #adadad;
}
.modelBotton {
  margin-left: 15px;
  color: var(--primary);
  border-color: var(--primary);
}
.head {
  .anticon-left {
    z-index: 3;
    left: 24px;
    position: absolute;
    color: #595959;
    font-size: 20px;
    margin-top: 21px;
  }
  .left2 {
    z-index: 3;
    left: 50px;
    position: absolute;
    color: #595959;
    font-size: 16px;
  }
  font-size: 16px;
  color: #000;
  font-weight: 500;
  text-align: center;
  line-height: 60px;
  height: 60px;
  border-bottom: 1px solid #e8e8e8;
}
</style>
